<template>
  <div id="app" class="max-w-7xl mx-auto p-5">
    <!-- Header -->
    <AppHeader />

    <!-- Task Creation Section -->
    <TaskCreation @task-created="handleTaskCreated" />

    <!-- Task View Section -->
    <TaskView ref="taskView" />
  </div>
</template>

<script>
import AppHeader from './components/AppHeader.vue'
import TaskCreation from './components/TaskCreation.vue'
import TaskView from './components/TaskView.vue'

export default {
  name: 'App',
  components: {
    AppHeader,
    TaskCreation,
    TaskView
  },
  methods: {
    handleTaskCreated(taskId) {
      if (this.$refs.taskView) {
        this.$refs.taskView.loadTaskById(taskId)
      }
    }
  }
}
</script>

<style scoped>
#app {
  min-height: 100vh;
}
</style>

